{% extends 'base.html' %}
{% block content %}
    <div class="data-lists">
        <h3>数据统计</h3>
        <form action="/dataStatistic/" method="post">
            <div class="tools clearfix">
                <div class="sel-condition">
                        <label>重金属类型 : </label>
                        <select id="metalType" class="mr30" name="metalType">
                            <option value="">--选择--</option>
                            <option value="全部">全部</option>
                            <option value="铅">铅</option>
                            <option value="汞">汞</option>
                            <option value="镉">镉</option>
                            <option value="铬">铬</option>
                            <option value="砷">砷</option>
                            <option value="锰">锰</option>
                            <option value="锌">锌</option>
                            <option value="Others">其他</option>
                            <option value="{{ metalType }}" selected="true">{{ metalType }}</option>
                        </select>
                    <label>省份 : </label>
                    <select id="Province" class="mr20" name="cmbProvince">
                        <option value="">--选择--</option>
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="天津">天津</option>
                        <option value="重庆">重庆</option>
                        <option value="四川">四川</option>
                        <option value="贵州">贵州</option>
                        <option value="云南">云南</option>
                        <option value="西藏">西藏</option>
                        <option value="河南">河南</option>
                        <option value="湖北">湖北</option>
                        <option value="湖南">湖南</option>
                        <option value="广东">广东</option>
                        <option value="广西">广西</option>
                        <option value="陕西">陕西</option>
                        <option value="甘肃">甘肃</option>
                        <option value="青海">青海</option>
                        <option value="宁夏">宁夏</option>
                        <option value="新疆">新疆</option>
                        <option value="河北">河北</option>
                        <option value="山西">山西</option>
                        <option value="内蒙古">内蒙古</option>
                        <option value="江苏">江苏</option>
                        <option value="浙江">浙江</option>
                        <option value="安徽">安徽</option>
                        <option value="福建">福建</option>
                        <option value="江西">江西</option>
                        <option value="山东">山东</option>
                        <option value="辽宁">辽宁</option>
                        <option value="吉林">吉林</option>
                        <option value="黑龙江">黑龙江</option>
                        <option value="海南">海南</option>
                        <option value="台湾">台湾</option>
                        <option value="香港">香港</option>
                        <option value="澳门">澳门</option>
                        <option value="{{ cmbProvince }}" selected="true">{{ cmbProvince }}</option>
                    </select>
                    <label>年份 : </label>
                    <select id="age" class="mr30" name="age">
                        <option value="">--选择--</option>
                        <option value="2014">2014</option>
                        <option value="2013">2013</option>
                        <option value="2012">2012</option>
                        <option value="2011">2011</option>
                        <option value="2010">2010</option>
                        <option value="2009">2009</option>
                        <option value="2008">2008</option>
                        <option value="{{ age }}" selected="true">{{ age }}</option>
{#                        <option value="08">八月</option>#}
{#                        <option value="09">九月</option>#}
{#                        <option value="10">十月</option>#}
{#                        <option value="11">十一月</option>#}
{#                        <option value="12">十二月</option>#}
                    </select>
                    <label>受体类型 : </label>
                    <select id="victimKind" class="mr30" name="victimKind">
                        <option value="">--选择--</option>
                        <option value="成人">成人</option>
                        <option value="儿童">儿童</option>
                        <option value="居民">居民</option>
                        <option value="职业工人">职业工人</option>
                        <option value="{{ victimKind }}" selected="true">{{ victimKind }}</option>
{#                        <option value="Cr">铬</option>#}
{#                        <option value="As">砷</option>#}
{#                        <option value="Mn">锰</option>#}
{#                        <option value="Zn">锌</option>#}
{#                        <option value="Others">其他</option>#}
                    </select>
{#                        <input id="search" type="button" value="统 计">#}
{#                    <button type="submit">确 定</button>#}
                    <button id="statisticBtn" name="statisticBtn" onclick="keepValue()">统 计</button>


                </div>
                <div class="child-tools">
{#                    <input type="submit" value="导 出">#}
{#                  <a href="data-export/" >  <span><img src="/static/img/print.jpg"></span></a>#}
                    <a href="/data-export/" class="">导 出</a>
                </div>
            </div>

            <div id="data_table" class="data-table">
                <table>
                    <thead>
                        <tr>
{#                            <th><input type="checkbox"  id="all_checked"  value="{{ metal.id}}"></th>#}
                            <th>事故名称</th>
                            <th>重金属类型</th>
                            <th>事发地点</th>
                            <th>行业类型</th>
                            <th>受体类型</th>
                            <th>受损人数</th>
{#                            <th>操作</th>#}
                        </tr>
                    </thead>
                    <tbody>
                    {% for metal in metals %}
                        <tr>
{#                            <td><input type="checkbox" id="check"  name="list" value="{{ metal.id }}"></td>#}
                            <td>{{ metal.accident }}</td>
                            <td>{{ metal.metal_kind }}</td>
                            <td>{{ metal.accident_place }}</td>
                            <td>{{ metal.occupation_standard }}</td>
                            <td>{{ metal.viticm_kind_name }}</td>
                            <td>{{ metal.viticm_kind_count }}</td>
{#                            <td>#}
{#                                <a href="/metal_modify/{{ metal.id }}/">修改</a>#}
{#                                <a href="/metal_delete/{{ metal.id }}/">删除</a>#}
{#                                <a href="/metal_detail/{{ metal.id }}/">详情</a>#}
{#                            </td>#}
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="paging clearfix">

                <ul class="clearfix">
                    <li><a href="?page=1">首页</a></li>
                    {% if contacts.has_previous %}
                        <li><a href="?page={{ contacts.previous_page_number }}">&lt;</a></li>
                    {% else %}
                        <li><a disabled>&lt;</a></li>
                    {% endif %}
                    {% for p in paginator.page_range %}
                        {% ifequal p contacts.number %}
                            <li class="active"><a disabled class="p">{{p}}</a></li>
                        {% else%}
                            <li><a href="?page={{ p }}">{{p}}</a></li>
                        {% endifequal %}
                    {% endfor %}
                    {% if contacts.has_next %}
                        <li><a href="?page={{ contacts.next_page_number }}">&gt;</a></li>
                    {% else %}
                        <li><a disabled> &gt;</a></li>
                    {% endif %}
                    <li><a href="?page={{ paginator.num_pages }}">尾页</a></li>
                </ul>
            </div>
        <div >
            <table border="1" id="statistic" >
                <thead >
                <tr>
                    <th>事故总数</th>
                    <th>受损人数</th>
                </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ accidentCount }}</td>
                        <td>{{ kindCount }}</td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div style="float: right">
            <input type="submit" id="outPut" name="outPut" value="导 出">
        </div>
        </form>
{#    <div class="map-spread clearfix">#}
{#        <h3>数据分布</h3>#}
{#        <div class="mapDiv">#}
{#            <div data-dojo-type="dijit.layout.BorderContainer" design="headline" gutters="false" style="position:relative;width:100%; height:700px;">#}
{#                <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden; height:700px;">#}
{#                    <div id="osmCopy" style="position:absolute; color:black;font-weight:bold;right:10px; bottom:10px; z-Index:999;"></div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#        <div class="representative-color">#}
{#            <span><b class="Pb">●</b> 铅 </span>#}
{#            <span><b class='Hg'>●</b> 汞 </span>#}
{#            <span><b class="Cd">●</b> 镉 </span>#}
{#            <span><b class="Cr">●</b> 铬 </span>#}
{#            <span><b class="As">●</b> 砷 </span>#}
{#            <span><b class="Mn">●</b> 锰 </span>#}
{#            <span><b class="Zn">●</b> 锌 </span>#}
{#            <span><b class="Other">●</b> 其它 </span>#}
{#        </div>#}
{##}
{#    </div>#}
</div>
{% endblock %}

{% block js %}
{#    <script type="text/javascript" src="http://192.168.1.251:8080/arcgis_js_api/library/3.1/jsapi/init.js"></script>#}
{#    <script type="text/javascript" src="/static/js/django-ajax.js"></script>#}
{#    <script type="text/javascript" src="/static/js/mapAction_index.js"></script>#}

{% endblock %}
